<template>
  <div :style="ItemStyle">
    <div class="bookmarks-item" >
      <div class="bookmarks-icon">
        <i v-if="isFolder" class="el-icon-folder bookmarks-folder"></i>
        <i v-else class="el-icon-collection"></i>
        <!-- <img :src="require('../../assets/icon.png')" width="32" height="32"> -->
      </div>
      <div class="bookmarks-content" >
        <span :class="[isFolder ? 'bookmarks-content__folder' : 'bookmarks-content__text']"  @click="openPage(bmItems)">{{ bmItems.title }}</span>
        <!-- <span :class="{'bookmarks-content__text':true, 'bookmarks-content__folder':isFolder}"  @click="openPage(bmItems)">{{ bmItems.title }}</span> -->
        <!-- <a v-else href="11" @click.prevent="openPage(bmItems)">{{ bmItems.title }}</a> -->
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'LSBookmarksItem',
  props: {
    gutter:{
      type: [Number, String],
      default: 15
    },
    dataItem: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      bmItems: {}
    }
  },
  computed: {
    ItemStyle() {
      return {
        'margin-top': '10px',
        'margin-right':`${this.gutter}px`
      }
    },
    isFolder() {
      return !!this.bmItems.children
    }
  },
  watch: {
    dataItem: {
      handler(newVal, oldVal) {
        this.bmItems = newVal || {};
        // console.log('******* newVal, oldVal ', newVal, oldVal)
      },
      immediate: true
    }
  },
  methods: {
    openPage(item) {
      this.$emit('openPage', item);
    }
  }
}
</script>
<style scoped>
.bookmarks-item {
  display: flex;
  height: 48px;
  align-items: center;
  padding:5px 10px;
  /* background-color: #eee; */
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 2px 2px #eee;
}

.bookmarks-icon {
  width: 50px;
  display: flex;
  align-items: center;
  color:#2067e2;
  font-size: 28px;
  /* justify-content: center; */
}

.bookmarks-icon .bookmarks-folder{
  color: burlywood;
}

.bookmarks-content {
  width:150px;
  font-size: 14px;
  /* background-color: aquamarine; */
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* .bookmarks-content a{
  text-decoration: none;
} */

.bookmarks-content .bookmarks-content__folder{
  color:black;
  text-decoration: none;
}

.bookmarks-content .bookmarks-content__text{
  color:#551A8B;
  text-decoration: underline;
}

.bookmarks-content .bookmarks-content__text:hover, .bookmarks-content__folder:hover{
  color:#2067e2;
}

.bookmarks-content .bookmarks-content__text:active, .bookmarks-content__folder:active{
  color:#ff0000;
}

</style>